<template>
	<div id="ClientService">
		<x-header :left-options="{showBack: false}" title="买家售后订单" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="service-list">
			<ul class="goods-wrap">
				<li v-for="(item,index) in return_record">
					<div class="title">
						<img src="../../assets/images/home/icon_beizhu.jpg" alt="" />
						<h2>{{item.shop_name}}</h2>
						<span v-if="item.return_state == null">申请退货</span>
						<span v-if="item.return_state == 1 && item.express_number == null">同意退货</span>
						<span v-if="item.return_state == 1 && item.express_number != null && pay_state != 2">等待卖家确认</span>
						<span v-if="pay_state == 2" style="color: #666;">交易失败</span>
					</div>
					<router-link :to="'/OrderInfo/order_sn/' + item.order_sn  + '?return_sn=' + item.return_sn">
						<div class="content">
							<img v-if="item.goods_id == undefined" src="../../assets/images/home/defaultImg.jpg" alt="" />
							<img v-else :src="'/los/uploads/thumb/goods/' + item.goods_id + '_84X84.jpeg'" alt="" />
							<div class="desc">
								<h2>{{item.goods_name}}</h2>
								<p class="money">退款金额 <span>￥{{item.return_money}}</span></p>
								<p class="timer">申请时间：{{item.add_time}}</p>
							</div>
						</div>
					</router-link>
					<div class="button">
						<router-link :to="'/OrderInfo/order_sn/' + item.order_sn  + '?return_sn=' + item.return_sn">
							<button v-if="pay_state != 2">确认收货</button>
						</router-link>
						<router-link :to="'/ClientReturnFlow/return_sn/' + item.return_sn">
							<button v-if="item.return_state == 1 && item.express_number == null">立即退货</button>
						</router-link>
						<button v-if="pay_state == 2" @click="removeOrder(index, item.return_sn,item.order_from)" class="del">删除订单</button>
					</div>
				</li>
			</ul>
		</div>
		<toast v-model="success" type="text" width='4rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, Toast } from 'vux';
	import $ from 'jquery';
	export default {
		data() {
			return {
				return_record: [],
				goodsInfo: {},
				pay_state: '',
				success: false,
				msg: ''
			}
		},
		components: {
			XHeader,
			Toast
		},
		mounted() {
			this.getBuyerReturn();
		},
		methods: {
			getBuyerReturn: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/buyer/goods_return_list.json '
				}).then((result) => {
					if(result.data.code == 1) {
						this.return_record = result.data.data.goods_return;
						var pay_state;
						$.each(this.return_record, function(index, item) {
							pay_state = item.goods_order.pay_state;
						})
						this.pay_state = pay_state;
					}
				}).catch((err) => {

				})
			},
			removeOrder: function(index, return_sn, order_from) {
				if(order_from == 'auction_order') {
					this.auctionOrderDel(index, return_sn);
				} else {
					this.seckillOrderDel(index, return_sn);
				}
			},
			//秒杀删除
			seckillOrderDel: function(index, return_sn) {
				var params = {
					return_sn: return_sn
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/buyer/goods_return_del.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.return_record.splice(index, 1);
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//拍品删除
			auctionOrderDel: function(index, return_sn) {
				var params = {
					return_sn: return_sn
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/buyer/goods_return_del.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.return_record.splice(index, 1);
					}
				}).catch((err) => {
					console.log(err);
				})
			},

			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}

	.goods-wrap {
		margin-top: 0.26rem;
		width: 100%;
		overflow: hidden;
	}

	.goods-wrap li {
		margin: 0 0.26rem 0.26rem;
	}

	.goods-wrap .title {
		overflow: hidden;
		padding: 0 0.26rem;
		height: 1.14rem;
		line-height: 1.14rem;
		background: #fff;
		border-top-left-radius: 0.26rem;
		border-top-right-radius: 0.26rem;
	}

	.goods-wrap .title img {
		float: left;
		width: 0.37rem;
		height: 0.37rem;
		margin-top: 0.38rem;
		margin-right: 0.21rem;
	}

	.goods-wrap .title h2 {
		float: left;
		font-size: 0.34rem;
		color: #222;
	}

	.goods-wrap .title span {
		float: right;
		color: #DD2828;
		font-size: 0.34rem;
	}

	.goods-wrap .title .fair {
		color: #aaa;
	}

	.goods-wrap .content {
		overflow: hidden;
		padding: 0.26rem;
		background: #F9F9F9;
	}

	.goods-wrap .content img {
		float: left;
		width: 2.05rem;
		height: 2.05rem;
		border-radius: 0.05rem;
	}

	.goods-wrap .content .desc {
		float: left;
		margin-left: 0.21rem;
		width: 74%;
		overflow: hidden;
	}

	.goods-wrap .content .desc h2 {
		font-size: 0.37rem;
		color: #222;
		font-weight: normal;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.goods-wrap .content .desc .money {
		margin-top: 0.64rem;
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}

	.goods-wrap .content .desc .money span {
		font-size: 0.32rem;
		color: #DD2828;
	}

	.goods-wrap .content .desc .timer {
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}

	.goods-wrap .button {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		padding: 0 0.26rem;
		background: #fff;
		border-bottom-left-radius: 0.26rem;
		border-bottom-right-radius: 0.26rem;
	}

	.goods-wrap .button button {
		background: #fff;
		width: 1.97rem;
		height: 0.69rem;
		line-height: 0.69rem;
		font-size: 0.34rem;
		color: #a30000;
		border: solid 1px #a30000;
		font-size: 0.34rem;
		float: right;
		text-align: center;
		border-radius: 0.34rem;
		margin-top: 0.3rem;
		margin-left: 0.26rem;
	}

	.goods-wrap .button button.del {
		border: solid 1px #666;
		color: #666;
	}

	.goods-wrap .button .confirm {
		border: solid 1px #777;
		color: #777;
		margin-right: 0.26rem;
	}
</style>
